<main class="app-content" id="sceneryDiv">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-map"></i> 景点</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">景点</a></li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleCaptions" class="bg-primary"
                                v-for="(item,index) in scenery" :data-slide-to="index"
                                :class="[index==0?'active':'']" style="height: 10px;">
                            </li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item" v-for="(sc,index) in scenery"
                                 :class="[index==0?'active':'']" style="height: 500px;overflow: hidden">
                                <img :src="sc.images[0].image" class="d-block w-100"
                                     :alt="sc.images[0].imageId"
                                     style="width:100%;height:500px;object-fit: cover;">
                                <div class="carousel-caption d-none d-md-block" style="color: #8fdf82">
                                    <h5>{{sc.sceneryName}}</h5>
                                    <p>{{sc.sceneryLocation}}</p>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev text-success" href="#carouselExampleCaptions" role="button"
                           data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next " href="#carouselExampleCaptions" role="button"
                           data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div class="card" style="overflow: hidden;margin-bottom: 30px;" v-for="sc in pageInfo.list">
                        <div class="card-body">
                            <h5 class="card-title">{{sc.sceneryName}}</h5>
                            <a class="btn btn-success" data-toggle="modal" data-target="#editTravel"
                               style="float: right;color: white;" @click="infoPage(sc.sceneryId)">
                                <i class="fa fa-edit m-right-xs"></i>查看详情
                            </a>
                            <pre class="card-text">{{sc.sceneryDetail}}</pre>
                            <p class="card-text"><small class="text-muted">{{sc.sceneryLocation}}</small></p>
                        </div>
                        <img :src="sc.images[0].image" class="card-img-bottom" alt="..."
                             style="height: 300px;object-fit: cover">
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    var sceneryVue = new Vue({
        el: "#sceneryDiv",
        data: {
            pageInfo: {
                list: [],
                total: "",
                navigatepageNums: 0,
                pageNum: "",
            },
            searchBean: {
                keyword: "",
                currentPage: 0,
            },
            scenery: []
        },
        methods: {
            searchScenery: function (index) {
                var self = this;
                self.searchBean.currentPage = index;
                self.images = []
                $.ajax({
                    url: "/api/scenery/v2",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.searchBean),
                    success: function (rs) {
                        self.pageInfo = rs;
                        if (rs.list.length >= 4) {
                            for (var i = 0; i < 4; i++) {
                                self.scenery.push(rs.list[i]);
                            }
                        } else {
                            self.scenery = rs.list;
                        }

                    }
                })
            },
            infoPage: function (id) {
                sessionStorage.setItem("sceneryId", id);
                window.location.href = "/pages/sceneryInfo";
            }
        },
        created: function () {
            window.infoPage = this.infoPage
        },
        mounted: function () {
            this.searchScenery(0);
        }
    })
</script>